<html>
    <head>
        <title>Mobile Flashlight</title>
        
        <style type="text/css">
            body { margin: 0px; }
            
            #pnlConfig {
                display: none;
                background-color: White;
                margin: 3px;
            }
        </style>
        
        <script type="text/javascript">
            function onChangeColour() {
                var colour = "#" + r.value + g.value + b.value;
        
                document.bgColor = colour;
                widget.setPreferenceForKey(colour, "colour");
            }

            function onWidgetLoad() {
                document.bgColor = widget.preferenceForKey("colour");
                // [CF] - TODO - handle preferenceForKey returning null
                // [CF] - TODO - setup sliders with default colour

                var menu = widget.menu;
                menu1001 = menu.createMenuItem(1001);
                menu1001.text = "Configure";
                menu1001.onSelect = onConfigure;
                menu.setSoftKey(menu1001, menu.leftSoftKeyIndex);

                var menu1002 = menu.createMenuItem(1002);
                menu1002.text = "About";
                menu1002.onSelect = onAbout;
                menu.append(menu1002);
            }

            function onConfigure() {
                if (menu1001.text == "Configure") {
                    menu1001.text = "Done";
                    pnlConfig.style.display = "block";
                }
                else {
                    menu1001.text = "Configure";
                    pnlConfig.style.display = "none";
                }
            }

            function onAbout() {
                alert("TODO - display about dialog...");
            }
        </script>
    </head>
    
    <body onload="onWidgetLoad();">
        <div id="pnlConfig">
            r <input id="r" type="text"  onchange="onChangeColour();" />
            g <input id="g" type="text" onchange="onChangeColour();" />
            b <input id="b" type="text" onchange="onChangeColour();" />
        </div>
    </body>
</html>